<template>
  <div>
    <Header1 :activeIndex=2></Header1>
    <div style="width: 1100px;margin: 40px auto">
    <el-row>
      <el-col :span="8" v-for="o in pageInfo.list" :key="o" >
        <el-card style="height: 350px;margin: 5px 10px 5px 10px" shadow="hover" v-loading="loading">
          <div class="leftTop">
            <el-tag v-if=" compareDate(makeDate(o.startTime),makeDate(new Date()))"
                    type="info" effect="dark" size="medium ">还未开始</el-tag>
            <el-tag v-if="compareDate(makeDate(new Date()),makeDate(o.startTime))&&compareDate(makeDate(o.stopTime),makeDate(new Date()))"
                    type="success" effect="dark"  size="medium ">正在进行中</el-tag>
            <el-tag v-if="compareDate(makeDate(new Date()),makeDate(o.stopTime))"
                    type="warning" effect="dark">已结束</el-tag>

          </div>
          <img v-if="o.jobfairImg" :src="$config.url+o.jobfairImg" class="image"
               style="width:372px ;height: 220px">
          <div v-else ><img  src="../hrWork/img/noImg.gif"  style="width:372px ;height: 220px"></div>
          <div class="content" style="text-align:center">
            <span class="title" @click="handleDetail(o.id)">{{o.jobfairName}}</span>
            <div class="bottom clearfix" >
              <span class="time">{{ makeSimpleDate(o.startTime)}}至{{ makeSimpleDate(o.stopTime)}}</span>
              <div>
                <a class="btn" style="width:110px ;margin-right: 10px" v-if="hr.hrId"
                   @click="addJobFairCompany(o.jobfairId)">参加该招聘会</a>
                <a class="btn" @click="JobFairCompany(o.jobfairId)">参会企业列表</a>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    </div>
    <!--弹窗：预览简历-->
    <el-dialog :visible.sync="isShow" style="" @close="eidtDialogClosed">
      <JobFairCompany v-if="refsh" :jobfairId="jobfairId"></JobFairCompany>
    </el-dialog>
  </div>
</template>

<script>
  import Header1 from "../header/Header"
  import JobFairCompany from "./JobFairCompany"
  import {makeSimpleDate,makeDate,compareDate} from "../../common/js/dateformat"


  export default {
    name: "job-fair",
    components: {
      Header1,
      JobFairCompany
    },
    data(){
      return {
        refsh:true,
        isShow:false,
        loading:false,
        hr:'',
        jobfairId:'',
        pageIndex:1,
        pageInfo:{},
        jobFair:{
          jobfairName:'',
          startTime:'',
          stopTime:''
        }
      }
    },
    created(){
      this.hr=this.$store.state.hr;
      this.getJobFair()
    },
    methods: {
      getJobFair(){
        this.loading=true;
        this.$ajax.post(this.$config.url + `jobfair/selJobFair/${this.pageIndex}`,this.jobFair
        ).then(res => {
          this.pageInfo = res.data;
          this.loading = false;
        }).finally(() => {
        })
      },
      addJobFairCompany(jobfairId){
        console.log(this.hr.companyId);
        if(this.hr.companyId!=null){
          this.$ajax.post(this.$config.url + `jobfaircompany/addJobfaircompany`,{
                "jobfairId":jobfairId,
                "companyId":this.hr.companyId
              }
          ).then(res => {
            if(res.data.message=="succ"){
              this.$message.success("报名参加成功")
            }else if(res.data.message=="isExist"){
              this.$message.warning("已报名该招聘会")
            }else{
              this.$message.error("出错了，添加失败")
            }
          }).finally(() => {
          })
        }else{
          this.$message.warning("请您先登录")
        }
      },

      JobFairCompany(jobfairId){
        this.refsh = false
        this.$nextTick(() => {
          this.refsh = true
        })
        this.jobfairId=jobfairId;
        this.isShow=!this.isShow;
      },
      makeSimpleDate(date) {
        return makeSimpleDate(date);
      },
      makeDate(date) {
        return makeDate(date)
      },
      compareDate(date1,date2){
        console.log(date1+"|"+date2+"|"+compareDate(date1,date2));
        return compareDate(date1,date2);
      },
    }
  }
</script>

<style scoped>
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }
  .leftTop {
    position:absolute;

  }


  .btn {
    display: inline-block;
    padding: 0 10px;
    font-size: 18px;
    color: #fff;
    border: none;
    height: 40px;
    line-height: 40px;
    background: #48c0a3;
    margin: 15px auto;
    overflow: hidden;
    transition: background 0.2s ease-in 0s;
  }

  .btn:hover {
    color: #fff;
    background: #019875;
  }


  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

</style>